<template>
  <div>
    <p>useStorage 测试，它可以将js的值实时存储到本地缓存中</p>
    <div>
      <p>测试一：存储对象的形式</p>
      <template v-if="state">
        <input v-model="state.hello" type="text" />
        <br />
        <input v-model="state.greeting" type="text" />
        <br />
        <button @click="state = null">清除store</button>
      </template>
      <button @click="getStore">获取缓存内容</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStorage } from '@vueuse/core';

const state = useStorage('my-store-localStorage', { hello: 'hi', greeting: 'Hello' });

function getStore() {
  console.log(state.value);
}

const state2 = useStorage(
  'my-store-sessionStorage',
  { hello2: 'hi', greeting2: 'Hello' },
  sessionStorage,
);
console.log('state2', state2.value);

const number = useStorage('test-number', 1);
console.log(number.value);

/**
 * useStorage 是LocalStorage/SessionStorage方法的二次封装
 * useStorage的第三个参数指定了存储的方式
 * 存储后 取值时参数类型不变
 */
</script>
